<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{padding: 0;margin: 0;}
        .wrap{
            margin: 20px;

            .button-group{
                margin-bottom: 10px;

                & button{
                    padding: 5px 20px;
                }
            }

            .sliderBar{
                width: 1100px;
                height: 100px;
                border: 1px solid #999;
                border-top: 0;
                position: relative;

                .ball{
                    width: 100px;
                    height: 100px;
                    border-radius: 50%;
                    background-color: aquamarine;
                    position: absolute;
                    left: 50px;
                    top:0;
                }
            }
        }
    </style>
</head>
<body>
    <!-- .wrap>(.button-group>button*3)+.sliderBar>.ball -->
    <div class="wrap">
        <div class="button-group">
            <button class="start">开始</button>
            <button class="pause">暂停</button>
            <button class="back">返回</button>
        </div>
        <div class="sliderBar">
            <div class="ball"></div>
        </div>
    </div>
</body>
<script>

    // JS运动 => 通过JS操作DOM元素,每间隔一段时间改变元素的位置  大小  透明度  margin padding等

    var start = document.querySelector(".start");
    var pause = document.querySelector(".pause");
    var back = document.querySelector(".back");
    var ball = document.querySelector(".ball");

    var timer = null;

    // 点击开始: 小球从当前位置向后移动
    start.onclick = function(){
        var cur = ball.offsetLeft;  // cur  1. 记录小球初始位置  2. 记录小球每次运动后的位置
        var end = 1000;
        var speed = 11;
        console.log(cur);
        clearInterval(timer);
        timer = setInterval(function(){
            cur += speed;
            console.log(cur);
            ball.style.left = cur + "px";

            // 判断是否到达终点 => 停下了
            // 理想情况下: cur == end  刚好到达终点  (但是如果需要运动的距离(终点-起点),不是speed的倍数 => 无法满足此条件)   => 无法停止

            // 解决方案:
            // 1. cur >= end    超出end或刚好到达终点,停下了(大于最大值)  => 强制到达终点  (此方案只适用于  end > start)
            // 2. Math.abs(cur - end) < Math.abs(speed)  => 在跑一次肯定超出,没有必要跑 => 直接到达终点

            if( Math.abs(cur - end) <= Math.abs(speed)){
                clearInterval(timer);
                ball.style.left = end + "px";
            }
        },10);
    }

    pause.onclick = function(){
        clearInterval(timer);
    }


    back.onclick = function(){
        var cur = ball.offsetLeft;  // cur  1. 记录小球初始位置  2. 记录小球每次运动后的位置
        var speed = -11;
        var end = 0;
        console.log(cur);

        clearInterval(timer);
        timer = setInterval(function(){
            cur += speed;
            console.log(cur);
            ball.style.left = cur + "px";

            // 判断是否到达终点 => 停下了
            // 理想情况下: cur == end  刚好到达终点  (但是如果需要运动的距离(终点-起点),不是speed的倍数 => 无法满足此条件)   => 无法停止

            // 解决方案:
            // 1. cur <= end    小于最小值,停下了  => 强制到达终点  (此方案只适用于  end(0) < start(1000))
            // 2. Math.abs(cur - end) < Math.abs(speed)  => 在跑一次肯定超出,没有必要跑 => 直接到达终点

            if(Math.abs(cur - end) < Math.abs(speed)){
                clearInterval(timer);
                ball.style.left = end + "px";
            }
        },10)
    }


</script>
</html>